import React from 'react';
import { Input,Space, Table, Pagination,message,Popconfirm,Button,Upload} from 'antd';
import {delCustom,getCustomlist,delAllCustom} from '../../../untils/api'
import { useEffect ,useState } from 'react';
import { DeleteFilled} from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
const { Search } = Input;
const { Column, ColumnGroup } = Table;
function StaffManage(props) {
    var history = useHistory()
    var [current, setCurrent] = useState(1);
    var [data,setdata]=useState([])
    var [total,setTotal]=useState(10)
    var [status1,setStatus1] = useState(false)
    var [selectedRowKeys,setSelectedRowKeys] = useState([])
        useEffect(()=>{
            setStatus1(true)
            getCustomlist({searchKey:'',page:current,count:10}).then((res)=>{
                console.log(res)
                setdata(res.data.list)
                setTotal(res.data.total)
                setStatus1(false)
            })
        },[current])

        const confirm = (a) => {
            delCustom({id:a,searchKey:'',page:current,count:10}).then((res)=>{
                if(res.data.code==200){
                    setdata(res.data.list)
                    setTotal(res.data.total)
                    message.info(res.data.msg);
                }
            })
          };

        const onSearch = (value) => {
            getCustomlist({searchKey:value,page:current,count:10}).then((res)=>{
                setdata(res.data.list)
            })
          }
        var onChange = (page) => {
            setCurrent(page);
          };
          var onChange1 = (res)=>{
            console.log(res)
            if( res.file.response && res.file.response.code == 200 && res.file.status == 'done' ){
                history.go(0)
                message.info(res.file.response && res.file.response.msg);
                return ;
            }
        }
        var delAll = ()=>{
            delAllCustom({keys:selectedRowKeys,searchKey:'',page:current,count:10}).then((res)=>{
                console.log(res)
                setdata(res.data.list)
            })
        }
        var onSelectChange=(newselectedRowKeys)=>{
            setSelectedRowKeys(newselectedRowKeys);
        }
    return (
        <div className='staffManage'>
            <h2>员工管理</h2>
            <div className='search-box'>
                <Search placeholder="输入员工姓名" enterButton="Search" onSearch={onSearch} className='search' />
            </div>
            <div className="btnbox">
                <div className='left'>
                <Button>创建人工外呼</Button>
                <Button>写入机器外呼</Button>
                <Button disabled={selectedRowKeys.length==0}>发送消息</Button>
                <Button disabled={selectedRowKeys.length==0}>设定负责人</Button>
                <Button><DeleteFilled onClick={delAll}/></Button>
                </div>
                <div className='right'>
                    <Upload
                            name="excel"
                            action="/api/custom/import"
                            onChange={onChange1}
                            headers={{'Authorization':'Bearer '}}
                            >
                    <Button type="primary">导入客户</Button>
                    </Upload>
                    <Button type="primary" href='/api/custom/export'>导出客户</Button>
                </div>
            </div>
            <Table dataSource={data} size='small' pagination={false} loading={status1} rowSelection={{selectedRowKeys, onChange: onSelectChange}}  >
                    <Column title="姓名" dataIndex="name" key="name" ellipsis='true'/>
                    <Column title="手机号" dataIndex="phone" key="phone" ellipsis='true'/>
                    <Column title="邮箱" dataIndex="email" key="email" ellipsis='true'/>
                    <Column title="地址" dataIndex="address" key="address" ellipsis='true'/>
                    <Column title="负责人" dataIndex="leader" key="leader" ellipsis='true'/>
                    <Column title="呼入时间" dataIndex="time" key="time" ellipsis='true'/>
                    <Column
                    ellipsis='true'
                    title="操作"
                    render={(_, record) => (
                        <Space size="middle">
                        <Popconfirm
                            title="确定删除吗?"
                            onConfirm={()=>{confirm(record._id)}}
                        >
                         <DeleteFilled />
                        </Popconfirm>
                        </Space>
                    )}
                    />
                </Table>
                <Pagination current={current} onChange={onChange} total={total} showSizeChanger={false} />;
        </div>
    );
}

export default StaffManage;